<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { computed } from 'vue'
import { useQiankun } from '@/utils/qiankun'

const { isSubApp, appType, subAppName } = useQiankun()
const isQiankunEnv = computed(() => isSubApp)
</script>

<template>
  <div id="sub-app">
    <header>
      <div class="app-title">
        <h2>子应用1 (qiankun-zi01)</h2>
        <el-tag :type="isQiankunEnv ? 'success' : 'warning'" size="small">
          {{ isQiankunEnv ? `微前端模式 (${subAppName})` : '独立运行' }}
        </el-tag>
      </div>
      <nav>
        <RouterLink to="/">主应用交互演示</RouterLink>
        <RouterLink to="/home">首页</RouterLink>
        <RouterLink to="/about">关于</RouterLink>
        <RouterLink to="/hello">Hello</RouterLink>
      </nav>
    </header>

    <main>
      <RouterView />
    </main>
    
    <footer>
      <p>应用类型: {{ appType }} | 运行环境: {{ isQiankunEnv ? 'qiankun 微前端' : '独立应用' }}</p>
      <p v-if="isQiankunEnv">当前子应用: {{ subAppName }}</p>
    </footer>
  </div>
</template>

<style scoped>
#sub-app {
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
  text-decoration: none;
  margin: 0 10px;
}

nav a.router-link-exact-active {
  color: #42b983;
}

footer {
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}
</style>
